<template>
    <div class="message">
        <loading :props="{type: 'page', show: loadingAjax}"> </loading>
        <DialogSlider v-if='showDialogSlider' :propsDialogSlider.sync="showDialogSlider" :propsList.sync="pictureList" :propsIndex.sync="index" :propsDialogType.sync='type'></DialogSlider>
        <div class="moduleHead">
            <span class="center">
                <span class="back" @click="$router.go(-1)"></span>
            <span>Message</span>
            <span class="right" v-if="currentUserObj.hasOwnProperty('status')" @click="bottomMenuList"><i></i><i></i><i></i></span>
            </span>
        </div>
        <div class="blockTips" v-if="showBlockTip">You blocked {{currentUserObj.account.username}}.</div>
        <div class="body" ref="messageBox">
            <div class="log" v-if="archiveLength > 5" @click="showHistory = !showHistory">{{showHistory ? 'Hide' : 'Show'}} message history</div>
            <div class="message_body">
                <MessageList :propsMessagesList="messagesList" :propsOptionFun="messageListFun" :propsType="'message'" :loading="loader_after"> </MessageList>
            </div>
        </div>
        <div class="showEmailarea" v-show="emailContent">
            <div class="showEmailarea_head">
                <span class="back" @click="emailContent = ''"></span>
                <span class="title"> Email </span>
            </div>
            <div class="showEmailarea_content" v-html="emailContent"></div>
            <!-- <div class="showEmailarea_bottom">
                <button class="btn">Reply</button>
            </div> -->
        </div>
        <div class="message_foot" v-if="!showBlockTip && !isUnavailable">
            <div class='messageFeedback' v-if="isSupport">
                <router-link :to="{ name: 'feedback' } ">
                    <button class="main_bg">{{language.login_feedback}}</button>
                </router-link>
            </div>
            <div class='messageInput' v-else>
                <div class="upphoto">
                    <input @change="sendPhoto" accept="image/*" type="file">
                </div>
                <div class="btn send" :class="{btn_disabled:!checkOk}" @click="sendMessage('text')">Send</div>
                <div class="center">
                    <textarea v-model="text" type="text" placeholder="Compose a message..." spellcheck="false" autocapitalize="off"></textarea>
                </div>
            </div>
        </div>
        <div class="tips" v-if="isUnavailable">The user is currently unavailable.</div>
        <publicDialog :props="this.dialogData">{{errorCode}}</publicDialog>
    </div>
</template>
<script>
import md5 from 'md5';
import SparkMD5 from 'spark-md5';
import chatPartMixin from '../common/chatPartMixin';
import * as API from '../api';
import DialogSlider from './DialogSlider'
import publicDialog from './PublicDialog'
import loading from './Loading'
import LazyImg from './LazyImg'
import MessageList from './MessageList'

let archiveMessages = [],
    showHistoryLen = 5,
    previousUserId = '',
    userName = '',
    deleteConversation = false;
export default {
    name: 'message',

    mixins: [chatPartMixin],

    components: {
        MessageList,
        LazyImg,
        DialogSlider,
        publicDialog,
        loading
    },

    data() {
        return {
            dialogData: {},
            loader_after: true,
            connected: false,
            showHistory: false,
            archiveLength: 0,
            text: '',
            isChated: false,
            showDialogSlider: false,
            index: 0,
            type: 'message',
            emailContent: '',
            loadingAjax: false,
            currentUserObj: {},
            isSupport: false,
        }
    },

    computed: {
        myId() {
            return parseInt(this.userInfo.account.usr_id);
        },

        checkOk() {
            if (this.text.trim().length > 0 && this.text.length <= 1000) {
                return true;
            } else {
                return false;
            }
        },

        currentUserId() {
            return this.$store.state.chat.chattingUserId;
        },

        showBlockTip() {
            if (!_.isEmpty(this.currentUserObj) && this.currentUserObj.status.isBlocked) {
                return true;
            }
            return false;
        },

        isUnavailable() {
            if (!_.isEmpty(this.currentUserObj) && this.currentUserObj.is_unavailable) {
                return true;
            }
            return false;
        },

        currentUnreadMessages() {
            let tthis = this,
                messages = [],
                currentUnreadMessages = _.find(this.$store.state.chat.unReadList, function(val, key) { return parseInt(key) == tthis.currentUserId; }) || [];
            _.forEach(currentUnreadMessages, function(val) { messages.unshift(val); });
            return messages;
        },

        messagesList() {

            let tthis = this,
                messages = this.messages;

            if (!_.isEmpty(this.currentUnreadMessages)) {
                this.markAllMessageRead();
            }
            // if (!_.isEmpty(messages)) {
            // this.currentUserObj = this.getUserObj(this.currentUserId).userInfo;
            // }
            if (tthis.currentUserObj) {
                _.forEach(messages, function(val, key) {
                    // messages[key]['senderName'] = val['sender'].toLowerCase();
                    messages[key]['formatTime'] = tthis.handleTimeFormat(key, messages[_.max([key - 1, 0])]['time'], val['time']);
                    messages[key]['icon'] = tthis.getPhoto(val['senderId']);
                    messages[key]['can_access_my_private_ablum'] = tthis.currentUserObj.status.can_access_my_private_ablum;
                    messages[key]['usr_id'] = val['senderId'];
                    messages[key]['gender'] = val['senderId'] == tthis.myId ? tthis.userInfo.account.gender : tthis.currentUserObj.account.gender;
                });
            }
            return messages || [];
        },

        messages() {
            let messages = [];
            if (!this.loader_after) {
                if (this.showHistory) {
                    messages = archiveMessages.concat(this.currentUnreadMessages);
                } else {
                    messages = (archiveMessages.slice(-(_.min([showHistoryLen, this.archiveLength])))).concat(this.currentUnreadMessages);
                }
            }
            //repeat id  其他平台读取，再回来未读已为已读了
            messages = _.uniqBy(messages, 'id');
            return messages || [];
        },

        pictureList() {
            let arr = [],
                messages = this.messages;
            _.forEach(messages, function(val) {
                if (val.sysType == 'image')
                    arr.push({
                        mssrc: val.message,
                        src: val.message,
                        pid: val.id,
                        title: '',
                        w: val.ix,
                        h: val.iy,
                        data: {
                            prof_id: val.senderId,
                        },
                    })
            })
            // console.log(arr)
            return arr;
        }
    },

    created() {
        let tthis = this;
        this.defaultData = _.clone(this.$data);
        this.ArchiveHandler = {
            proccess: function(obj, args) {
                console.log("ArchiveHandler: ", args);
                if (!tthis.isChatroomJid(args.jid) && args.messages) {
                    tthis.getUsersInfo([tthis.currentUserId], function() {
                        archiveMessages = _.reverse(args.messages);
                        tthis.loader_after = false;
                        tthis.archiveLength = args.messages.length;
                    })
                }
            }
        };

        this.MessageErrorHandler = {
            proccess: function(obj, args) {
                console.log("MessageErrorHandler:", obj, args);
                if (typeof(args.id) != 'undefined' && args.code !== 2006) {
                    tthis.$store.dispatch('chat_changeMessageStatus', {
                        error: true,
                        id: args.id,
                        receiverId: tthis.currentUserId,
                    });
                }
                switch (args.code) {
                    case 2003:
                        tthis.upgradeWindow();
                        break;
                    case 2004:
                        tthis.showTopTips({ type: 'error', text: 'Sorry, this member is currently not available. Please try to contact other members!' });
                        break;
                    case 2007:
                        tthis.showTopTips({ type: 'error', text: 'Sender is hold by IM!' });
                        break;

                }
            }
        };

        this.$store.watch(
            (state) => state.chat.unReadList[tthis.currentUserId],
            (arr) => {
                if (typeof(arr) != 'undefined') {
                    if (parseInt(arr[0].senderId) == tthis.myId) {
                        tthis.$nextTick(function() {
                            tthis.gotoScrollBottom();
                        });
                        if (arr[0].forwarded) {
                            tthis.isChated = true;
                        }
                    }
                }
            }, {
                deep: true
            }
        );

        this.$nextTick(function() {
            tthis.gotoScrollBottom();
        });

        this.$root.$on('chat_reset', function() {
            Object.assign(tthis.$data, tthis.defaultData);
            archiveMessages = [];
        });
    },

    activated() {
        if (previousUserId != this.$route.query.userId) {
            this.text = '';
        }
        previousUserId = this.$route.query.userId;
        userName = this.$route.query.userName.toLowerCase();
        let tthis = this;
        this.$store.dispatch('chat_changeChattingUserId', parseInt(this.$route.query.userId));
        this.getUsersInfo([tthis.currentUserId], () => {
            tthis.currentUserObj = tthis.getUserObj(tthis.currentUserId).userInfo;
            tthis.checkSupport();
        })
        this.loader_after = true;
        if (this.connected) {
            this.getArchive();
        }
    },

    deactivated() {
        if (deleteConversation) {
            this.$store.dispatch('chat_deleteUnread', this.currentUserId);
            deleteConversation = false;
        } else {
            ArchiveMessageHistory[this.currentUserId] = archiveMessages.concat(this.currentUnreadMessages);
            if (this.currentUnreadMessages) {
                this.$store.dispatch('chat_deleteUnread', this.currentUserId);
                if (this.isChated) {
                    let lastMessage = ArchiveMessageHistory[this.currentUserId][(ArchiveMessageHistory[this.currentUserId]).length - 1];
                    lastMessage.contactId = this.currentUserId.toString();
                    this.$store.dispatch('chat_topContactList', lastMessage);
                }
            }
        }

        userName = '';
        archiveMessages = [];
        this.showHistory = false;
        this.isChated = false;
        this.archiveLength = 0;
        this.currentUserObj = {};
        this.showDialogSlider = false;
        this.index = 0;
        this.isSupport = false;
        this.emailContent = '';
        this.loadingAjax = false;
        this.$store.dispatch('chat_changeChattingUserId', '');
    },

    methods: {

        checkSupport() {
            if (!_.isEmpty(this.currentUserObj)) {
                if (this.currentUserObj.account.username.toLowerCase() == 'support') {
                    this.isSupport = true;
                }
            }
        },

        messageListFun() {
            let tthis = this,
                obj = {};
            obj.showEmailInfo = function(message_id, is_receiver) {
                tthis.showEmailInfo(message_id, is_receiver);
            }
            obj.privateAlbumRequest = function() {
                tthis.privateAlbumRequest();
            }
            obj.openDialogSlider = function(id) {
                tthis.openDialogSlider(id);
            }
            return obj;
        },

        showEmailInfo(message_id, is_receiver) {
            let tthis = this;
            tthis.loadingAjax = true;
            API.show_mail({
                data: {
                    message_id: message_id,
                    is_receiver: is_receiver ? 1 : 0
                },

                success: function(result) {
                    tthis.emailContent = result.msg || result.email_html.match(/<body.*>([^]*)<\/body>/)[1]
                },

                complete: function() {
                    tthis.loadingAjax = false;
                }
            })
        },

        privateAlbumRequest() {
            if (this.currentUserObj.status.can_access_my_private_ablum) return;
            let tthis = this,
                obj = {};
            obj.data = { prof_id: this.currentUserId, approve: 1 };
            obj.callback = function() {
                tthis.saveUserObj({ can_access_my_private_ablum: 1 });
            };
            obj.complete = function() {
                tthis.loadingAjax = false;
            }
            tthis.loadingAjax = true;
            this.$store.dispatch('user_approvePrivateAlbumRequest', obj);
        },

        openDialogSlider(id) {
            this.index = _.findIndex(this.pictureList, {
                pid: id
            })
            this.showDialogSlider = true;
        },

        showTopTips(obj) {
            this.dialogData = {
                position: 'top',
                type: obj.type,
                content: {
                    info: obj.text,
                },
            };
        },

        gotoScrollBottom() {
            let el = this.$refs.messageBox;
            el.scrollTop = el.scrollHeight;
        },

        componentConnectOK() {
            MiniIM.Handler.addHandler(MiniIM.Handler.KEYS.ARCHIVE, this.ArchiveHandler);
            MiniIM.Handler.addHandler(MiniIM.Handler.KEYS.ERROR, this.MessageErrorHandler);
            this.connected = true;
            if (this.currentUserId && userName) { //重连不在当前模块
                this.getArchive();
            }
        },

        getPhoto(usr_id) {
            let obj = parseInt(usr_id) == this.myId ? this.userInfo : this.currentUserObj,
                icon = obj.pictures && obj.pictures[0] ? obj.pictures[0]['icon'] : '';
            return icon;
        },

        getArchive() {
            if (ArchiveMessageHistory[this.currentUserId]) {
                archiveMessages = ArchiveMessageHistory[this.currentUserId];
                this.archiveLength = archiveMessages.length;
                this.loader_after = false;
            } else {
                MiniIM.Action.loadArchive(userName, this.currentUserId, MiniIM.TYPE.PRIVATE, null, 50);
            }
        },

        sendMessage(type, uploadObj) {
            let tthis = this;
            if (!this.checkOk && type == 'text') return;
            if (this.checkPermission()) {
                this.isChated = true;
                let obj = this.createNewMessage(this.text || uploadObj.img, 'clientMessage');
                if (type == 'text') {
                    this.sendMessageToServer(obj, 'text');
                    this.text = '';
                } else {
                    obj.sysType = 'image';
                    obj.uploading = true;
                    this.getFileMd5(Object.assign(uploadObj, obj), function(fileMd5, uploadObj) {
                        tthis.checkPepeatPhoto(fileMd5, uploadObj)
                    });
                }

                this.$store.dispatch('chat_sendMessage', obj);

            } else {
                this.upgradeWindow();
            }

        },

        upgradeWindow() {
            let tthis = this;
            this.dialogData = {
                position: 'middle',
                type: 'upgrade',
                content: {
                    info: 'Upgrade now to send messages.',
                },
                callback: function() {
                    tthis.$router.push({
                        name: 'upgrade'
                    })
                }
            };
        },

        sendMessageToServer(data, type) {
            let obj = {};
            if (type == 'text') {
                obj = data;
            } else {
                Object.assign(obj, data, this.createNewMessage(data, type), {
                    uploading: false,
                });
                this.$store.dispatch('chat_changeMessageStatus', obj);
            }
            MiniIM.Action.sendMessage(obj.receiver, obj.message, null, obj);
        },

        createNewMessage(msg, type) {
            let obj = {};
            if (type == 'clientMessage') {
                obj.sender = this.userInfo.account.username.toLowerCase();
                obj.senderId = this.myId.toString();
                obj.id = md5(msg + new Date().getTime());
                obj.time = new Date();
                obj.receiverId = this.currentUserId.toString();
                obj.receiver = userName.toString();
                obj.message = msg;
                obj.error = false;
            } else {
                obj.message = msg.picture;
                obj.url = msg.picture;
                obj.lifetime = msg.lifetime.toString();
                obj.ix = msg.ix.toString();
                obj.iy = msg.iy.toString();
                obj.sysType = 'image';
                obj.uploading = true;
                obj.image = true;
            }
            obj = this.specialAccountFilter(obj);
            return obj;
        },

        specialAccountFilter(message) {
            if (message.sender !== 'support') {
                var str = message.message;
                if (str) {
                    str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
                    str = str.replace(/<\/?[^>]*\.{2,3}/g, ''); //半合并,非规范的标签处理
                    str = str.replace(/</g, "&lt;"); //半合并,非规范的标签处理
                    str = str.replace(/>/g, "&gt;");
                    message.message = str;
                    // if ($.trim(message.sysType).toLowerCase() == 'wink' && share.msgReplaceEmail()) {
                    //     message.message = message.message.replace('email', 'message');
                    // }
                }
            }
            return message;
        },

        showMessageType(type) {
            let typeStr = '';
            switch (type) {
                case 'email':
                    typeStr = 'EMALI';
                    break;
                case 'wink':
                    typeStr = 'WINK';
                    break;
                case 'request_album':
                    typeStr = 'sysTypeRequest_album';
                    break;
                default:
                    typeStr = '';
            }
            return typeStr;
        },

        handleTimeFormat(index, last, current) {
            let lastTime = new Date(last).getTime(),
                currentTime = new Date(current).getTime();
            if ((index == 0) || (currentTime > lastTime + (5 * 60 * 1000))) {
                return this.formatDate(current);
            }
            return '';
        },

        checkPermission() {
            let tthis = this;
            if (this.$store.getters.isGuest) {
                if (userName == 'livesupport' || this.archiveLength || this.currentUnreadMessages.length) {
                    let index = _.findIndex(archiveMessages.concat(this.currentUnreadMessages), function(val) { return (parseInt(val.senderId) == tthis.currentUserId) && (typeof(val.sysType) == 'undefined' || val.sysType == 'image') });
                    return index > -1 ? true : false;
                } else {
                    return false;
                }
            } else {
                return true;
            }
        },

        markAllMessageRead() {
            MiniIM.Action.markAllMessagesRead(userName);
        },

        sendPhoto(e) {
            let tthis = this,
                reader, file = e.target.files[0];
            if (file) {
                if (file.size > 5120000) {
                    console.log('the picture is too big!')
                    return;
                }
                tthis.text = '';
                reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    tthis.sendMessage('photo', {
                        img: e.target.result,
                        file: file
                    });
                }
            }
        },

        getFileMd5(uploadObj, callback) {
            let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                chunkSize = 2097152, // read in chunks of 2MB
                file = uploadObj.file,
                chunks = Math.ceil(file.size / chunkSize),
                currentChunk = 0,
                spark = new SparkMD5.ArrayBuffer(),
                frOnload = function(e) {
                    spark.append(e.target.result); // append array buffer
                    currentChunk++;
                    if (currentChunk < chunks) {
                        loadNext();
                    } else {
                        callback(spark.end(), uploadObj);
                    }
                },
                frOnerror = function() {
                    console.log("\noops, something went wrong.");
                };

            function loadNext() {
                var fileReader = new FileReader();
                fileReader.onload = frOnload;
                fileReader.onerror = frOnerror;
                var start = currentChunk * chunkSize,
                    end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
                fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
            };
            loadNext();
        },

        checkPepeatPhoto(fileMd5, uploadObj) {
            let tthis = this;
            API.get_file_md5_exists({
                data: {
                    md5: fileMd5
                },
                success: function(result) {
                    if (typeof(result.exists) != 'undefined' && parseInt(result.exists) == 0) {
                        tthis.uploadPhoto(uploadObj);
                    } else {
                        tthis.sendMessageToServer(Object.assign(uploadObj, result), 'photo');
                    }
                }
            })
        },

        uploadPhoto(uploadObj) {
            let tthis = this,
                photoObj = new FormData();
            photoObj.append('file0', uploadObj.file);
            API.upload_with_p({
                data: photoObj,
                success: function(result) {
                    if (result.results) {
                        tthis.sendMessageToServer(Object.assign(uploadObj, result), 'photo');
                    }
                }
            })
        },

        bottomMenuList() {
            let tthis = this,
                arr = [];
            if (this.currentUserObj.account.username == 'support') {
                arr.push({
                    label: 'Delete conversation',
                    btnCallback: function() {
                        setTimeout(function() {
                            tthis.dialogData = {
                                position: 'middle',
                                type: 'confirm',
                                content: {
                                    title: '',
                                    info: 'Are you sure you want to delete this message?'
                                },
                                callback: function() {
                                    tthis.removeConversation();
                                },
                            }
                        }, 10);
                    }
                });

            } else {

                arr.push({
                    label: 'View profile',
                    btnCallback: function() {
                        tthis.$router.push({
                            name: 'userProfile',
                            query: {
                                userName: userName,
                                userId: tthis.currentUserId
                            }
                        });
                    }
                });

                arr.push({
                    label: 'Delete conversation',
                    btnCallback: function() {
                        setTimeout(function() {
                            tthis.dialogData = {
                                position: 'middle',
                                type: 'confirm',
                                content: {
                                    title: '',
                                    info: 'Are you sure you want to delete this message?'
                                },
                                callback: function() {
                                    tthis.removeConversation();
                                },
                            }
                        }, 10);
                    }
                });

                arr.push({
                    label: 'Report',
                    btnCallback: function() {
                        tthis.$router.push({
                            name: 'reportUser',
                            query: {
                                userName: userName,
                                userId: tthis.currentUserId
                            }
                        });
                    }
                });

                arr.push({
                    label: tthis.currentUserObj.status.isBlocked ? 'Unblock' : 'Block',
                    btnCallback: function() {
                        setTimeout(function() {
                            tthis.dialogData = {
                                position: 'middle',
                                type: 'confirm',
                                content: {
                                    title: '',
                                    info: tthis.language.userProfile_areBlockUser
                                },
                                callback: function() {
                                    tthis.blockUser();
                                },
                            }
                        }, 10);
                    }
                });
            }


            tthis.dialogData = {
                position: 'bottom',
                content: {
                    btn: arr
                }
            };
        },

        blockUser() {
            let tthis = this,
                obj = {},
                data = {
                    prof_id: this.currentUserObj.account.usr_id,
                },
                action = this.currentUserObj.status.isBlocked == 1 ? 'un_block' : 'block';
            data.action = action;
            tthis.loadingAjax = true;
            API.block({
                data: data,
                success: function(result) {
                    if (result.results == 1) {
                        if (action == 'un_block') {
                            tthis.currentUserObj.status.isBlocked = 0;
                            obj.isBlocked = 0;

                        } else {
                            tthis.currentUserObj.status.isBlocked = 1;
                            tthis.currentUserObj.status.isFavorite = 0;
                            tthis.currentUserObj.status.user_has_access_of_my_private_album = 0;
                            obj.isBlocked = 1;
                            obj.isFavorite = 0;
                            obj.user_has_access_of_my_private_album = 0;
                        }
                        tthis.saveUserObj(obj);
                    }
                },
                complete: function() {
                    tthis.loadingAjax = false;
                }
            })
        },

        saveUserObj(obj) {
            let usersInfo = Unit.getObjSessionStorage('usersInfo') || {};
            Object.assign(usersInfo[this.currentUserId]['userInfo']['status'], obj);
            Unit.setSessionStorage('usersInfo', JSON.stringify(usersInfo));
        },

        removeConversation() {
            delete ArchiveMessageHistory[this.currentUserId];
            deleteConversation = true;
            MiniIM.Action.removeArchive(userName);
            this.$store.dispatch('chat_deleteContact', this.currentUserId.toString());
            this.$router.go(-1);
        }

    },
}

</script>
<style scoped>
.message {
    background: #f5f7f8;
    padding-top: 44px;
    padding-bottom: 40px;
}

.message .body .messageList {
    margin-top: 0;
}

.message .moduleHead .right {
    padding-top: 18px;
    padding-right: 8px;
    height: 44px;
    opacity: 1;
    box-sizing: border-box;
}

.message .moduleHead .right i {
    float: right;
    width: 5px;
    height: 5px;
    background: #ccc;
    margin: 0 3px;
    border-radius: 50%;
}

.message .log {
    height: 31px;
    color: #666;
    font-size: 14px;
    text-align: center;
    width: 100%;
    line-height: 31px;
    background: #dcdcdc;
}

.message .blockTips {
    position: absolute;
    top: 45px;
    height: 30px;
    color: #666;
    font-size: 14px;
    text-align: center;
    width: 100%;
    line-height: 30px;
    background: #ff634a;
    color: #fff;
    z-index: 3;
}

.message .message_body .date {
    width: 100%;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: #868080;
}

.message .message_body .messageBox {
    padding-bottom: 10px;
}

.message .message_body .messageBox .content .type {
    border-bottom: 1px solid #ccc;
    min-width: 70px;
    margin-bottom: 2px;
}

.message .message_body .messageBox .content .readMore {
    text-align: right;
    font-size: 12px;
    margin-top: 6px;
}

.message .message_body .messageBox .content .messageImg {
    z-index: 1;
    position: relative;
    min-width: 50px;
    min-height: 38px;
    overflow: hidden;
    border-radius: 3px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 38px;
    background-image: url(../assets/ico_message_not_found.png);
}

.message .message_body .messageBox .content .messageImg_loading {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-image: url(../assets/max_loading.gif);
    /* display: none; */
}

.message .message_body .messageBox .content .messageImg dd {
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.6);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    background-image: url(../assets/max_loading.gif);
    background-color: #f3f3f3;
}

.message .message_body .messageBox .content .messageImg img {
    max-width: 150px;
    min-width: 60px;
    max-height: 150px;
    min-height: 60px;
    display: block;
}

.message .message_body .messageBox {
    position: relative;
}

.message .message_body .messageBox .avatar {
    overflow: hidden;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #dcdbdb;
    background-image: url(../assets/default_avatar.png);
}

.message .message_body .messageBox .content_wrap {
    position: relative;
    overflow: hidden;
    padding: 8px 14px;
}

.message .message_body .messageBox .content {
    position: relative;
    padding: 5px;
    border-radius: 3px;
    font-size: 13px;
    min-width: 30px;
    max-width: 80%;
    min-height: 20px;
    word-break: break-word;
}

.message .message_body .messageBox .content_wrap:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 18px;
    border: 6px solid;
}

.message .message_body .messageLeft .content_wrap:after {
    left: 2px;
    border-color: #FFF #FFF transparent transparent;
}

.message .message_body .messageRight .content_wrap:after {
    right: 2px;
    border-color: #D4AC67 transparent transparent #D4AC67;
}

.message .message_body .messageLeft {
    padding-left: 6px;
}

.message .message_body .messageRight {
    padding-right: 6px;
}

.message .message_body .messageLeft .content .readMore {
    color: #D4AC67;
}

.message .message_body .messageRight .content .readMore {
    color: #fff;
}

.message .message_body .messageLeft .avatar {
    float: left;
}

.message .message_body .messageRight .avatar {
    float: right;
}

.message .message_body .messageLeft .content {
    float: left;
    color: #333333;
    background: #fff;
}

.message .message_body .messageRight .content {
    float: right;
    color: #fff;
    background: #D4AC67;
}

.message .message_body .messageRight .content_wrap .message_fail {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    float: right;
    border-radius: 50%;
    background: url(../assets/warning.png) no-repeat center;
    background-size: 20px;
}

.message .tips {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 38px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
    padding: 9px 10px;
    line-height: 20px;
    color: #999999;
    font-size: 12px;
    text-align: center;
}

.message .message_foot {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 40px;
}

.message .message_foot .center {
    height: 38px;
    overflow: hidden;
}

.message .message_foot .center textarea {
    width: 100%;
    height: 18px;
    padding: 10px 2px;
    border: 0;
    resize: none;
    font-size: 14px;
}

.message .message_foot .upphoto {
    position: relative;
    width: 40px;
    height: 38px;
    float: left;
    background: url(../assets/ico_message_upload_photo.png) no-repeat center;
    background-size: 20px;
}

.message .message_foot .upphoto input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.message .message_foot .send {
    width: 50px;
    margin: 4px;
    padding: 0;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    float: right;
}

.message .message_foot .send.btn_disabled {
    opacity: .5;
}

.message .showEmailarea {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f6f7f9;
    z-index: 999;
    overflow: hidden;
}

.message .showEmailarea .showEmailarea_head {
    position: absolute;
    z-index: 9;
    background-color: #181B20;
    color: #fff;
    height: 44px;
    width: 100%;
    text-align: center;
}

.message .showEmailarea .showEmailarea_head .title {
    width: 200px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    line-height: 44px;
    font-size: 20px;
}

.message .showEmailarea .showEmailarea_head .back {
    height: 44px;
    width: 44px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    display: block;
    background-image: url(../assets/back.png);
    background-size: 25px auto;
    background-repeat: no-repeat;
    background-position: center;
}

.message .showEmailarea .showEmailarea_content {
    padding: 64px 10px 60px;
    height: 100%;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 13px;
    box-sizing: border-box;
}

.message .showEmailarea .showEmailarea_bottom {
    position: absolute;
    z-index: 9;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 10px 20px;
    box-sizing: border-box;
}

.message .messageFeedback button {
    color: #fff;
    height: 38px;
    width: 90%;
    text-align: center;
    line-height: 40px;
    border-radius: 3px;
    margin: auto;
    font-size: 15px;
    display: block;
}

.message .messageInput {
    background: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

</style>
